<template>
  <el-menu-item
    :index="generatorPath()"
    class="menu-item-wrapper"
    @click="handleClick"
  >
    <ly-svg-icon
      :icon-class="
        showRoute.meta ? showRoute.meta.icon || 'el-icon-menu' : 'el-icon-menu'
      "
    />
    <span slot="title" class="title">{{
      showRoute.meta ? showRoute.meta.title : showRoute.name
    }}</span>
    <ly-menu-item-tip
      :value="showRoute.meta ? showRoute.meta.badge || '' : ''"
      :is-dot="showRoute.meta ? showRoute.meta.badge === 'dot' : false"
    />
  </el-menu-item>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import * as path from "path";
import { isExternal } from "@/utils/utils";
@Component({
  name: "LyMenuItem",
  components: {},
})
export default class LyMenuItem extends Vue {
  //#region vue prop =================================

  @Prop({
    required: true,
    type: String,
    default: "",
  })
  fullPath: string;

  @Prop({
    required: true,
    type: Object,
    default: () => {
      return {};
    },
  })
  item: any;

  @Prop({
    required: true,
    type: Object,
    default: () => {
      return {};
    },
  })
  showRoute: any;
  //#endregion

  //#region vue data =================================

  //#endregion
  //#region computed getter =================================

  //#endregion
  //#region vue life =================================
  created() {
    console.log("LyMenuItem " + "created");
  }

  mounted() {
    console.log("LyMenuItem " + "mounted");
  }

  beforeDestroy() {
    console.log("LyMenuItem " + "beforeDestroy");
  }

  //#endregion
  //#region comp getter =================================

  //#endregion
  //#region server data =================================

  //#endregion
  //#region components Func =================================
  private generatorPath() {
    return path.resolve(this.fullPath, this.showRoute.path);
  }
  private handleClick() {
    if (isExternal(this.showRoute.path)) {
      window.open(this.showRoute.path);
    } else if (isExternal(this.fullPath)) {
      window.open(this.fullPath);
    } else if (
      this.$route.path !== path.resolve(this.fullPath, this.showRoute.path)
    ) {
      this.$router.push({
        path: path.resolve(this.fullPath, this.showRoute.path),
      });
    }
  }
  //#endregion
  //#region Public Func =================================

  //#endregion
  //#region view layout =================================

  //#endregion
}
</script>
<style lang="scss" scoped>
.title {
  margin-left: 10px;
  color: currentColor;
  font-size: 14px;
}
::v-deep .el-menu-item [class^="el-icon-"] {
  margin-right: 0;
  width: 1em;
  height: 1em;
  font-size: 14px;
}
</style>
